
  // 1,获取 浏览器地址栏参数
 const urlValObj = myGetUrlValObj();
 console.log(urlValObj);
 let goods_id = urlValObj.goods_id;
 console.log(goods_id);

 // 2,发送请求 根据结果 动态生成页面
 setPage();

 async function setPage() {
   // 发送请求
   const res = await myPromiseJQueryAjax(
     "../server/goods_detail.php",
     "post",
     { goods_id },
     "json"
   );
   console.log(res);
   let str = ` <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">商品详细信息</h3>
   </div>
   <div class="panel-body">
     <div class="media">
       <div class="media-left">
         <a href="#">
           <img
             class="media-object"
             src='${res.goods_small_logo}'
             alt="..."
           />
         </a>
       </div>
       <div class="media-body">
         <h4 class="media-heading">
           ${res.goods_name}
         </h4>
         <p>
           <i class="glyphicon glyphicon-yen"></i>
           <span>${res.goods_price}</span>
         </p>
         <div class="btn-group" role="group" aria-label="...">
           <button type="button" class="btn btn-default">XL</button>
           <button type="button" class="btn btn-default">L</button>
           <button type="button" class="btn btn-default">M</button>
           <button type="button" class="btn btn-default">S</button>
           <button type="button" class="btn btn-default">XS</button>
         </div>
         <p style="position: relative">
           <input name="num" value="1" class="num" />
           <button name="-" type="button" class="jian btn btn-default">-</button>
           <button name="+" type="button" class="jia btn btn-default">+</button>
         </p>
         <p>
           <a
             href="javascript:;" name='man'
             class="btn btn-warning btn-lg"
             role="button"
             >立即购买</a
           >
           <a
             href="javascript:;" name="Man"
             class="btn btn-danger btn-lg"
             role="button"
             >加入购物车</a
           >
         </p>
       </div>
     </div>
     <ul class="nav nav-tabs">
       <li role="presentation" class="active">
         <a href="#">商品详细信息</a>
       </li>
       <li role="presentation"><a href="#">商品参数信息</a></li>
       <li role="presentation"><a href="#">相关商品</a></li>
     </ul>
     <div>
       <img
         src="${res.goods_introduce}"
         alt=""
       />
     </div>
   </div>
 </div>
 `;
   // 内容写入标签对象
   $(".container").html(str);

   // 3，通过事件委托 添加点击事件
   $(".container").click(function (event) {
     // event.target 是 js标签对象 不是jQuery伪数组
     // console.log(event.target);

     if ($(event.target).attr("name") === "-") {
       // input标签中 数值 累减1 最小值是1
       $('[name="num"]').val(
         Number($('[name="num"]').val()) - 1 < 1
           ? 1
           : Number($('[name="num"]').val()) - 1
       );
     } else if ($(event.target).attr("name") === "+") {
       // input 标签中 数值 累加1 最大值 库存值
       $('[name="num"]').val(
         Number($('[name="num"]').val()) + 1 > res.goods_number
           ? res.goods_number
           : Number($('[name="num"]').val()) + 1
       );
     } else if ($(event.target).attr("name") === "Man") {
       // if (Number($('[name="num"]').val()) > res.goods_number) {
       //   window.alert("您输入的账号重复 请你重新输入");
       // } else if (Number($('[name="num"]').val()) < 1) {
       //   window.alert("您输入的账号重复 请你重新输入");
       // }

       // 获取 cookie
       const cookieObj = myGetCookie();
       console.log(cookieObj);
       console.log(cookieObj.login);

       // 判断 有没有 login 这个属性对应的属性值
       if (cookieObj.login === undefined) {
         // 没有登录
         if (window.confirm("大笨蛋还没有登录，点击跳转登录")) {
           window.location.href = `./login.html?url=${window.location.href}`;
         }
       } else {
         // 1, 判断 输入的购买数量 必须是 1 - 库存
         if (
           !(
             Number($('[name="num"]').val()) >= 1 &&
             Number($('[name="num"]').val()) <= res.goods_number
           )
         ) {
           // 弹出提示信息
           window.alert(
             `您输入的购买数量超出范围,必须是1-${res.goods_number}`
           );

           // 给 购买数量 赋值一个 合理范围内的数值
           $('[name="num"]').val(1);

           // 通过 return 终止之后程序的执行
           return;
         }
         // 2,将 当前商品信息 添加到 购物车
         // 也就是 localStorage 存储 购物车 数组

         // 当前 还没有 创建 购物车 键值对
         // 也就是 localStorage 调用 购物车键名 结果是 undefined
         if (window.localStorage.Man === undefined) {
           // 添加 购物车中 当前商品的属性
           // 当前添加商品的购买数量
           res.num = Number($('[name="num"]').val());

           // 当前添加商品的购买状态 true购买 false不购买 默认是购买
           res.buy = true;

           // 将 当前 商品的数据对象 以 数组存储 转化为 json字符串 存储到  localStorage 中
           window.localStorage.Man = JSON.stringify([res]);
         } else {
           // 购物车已经存在
           // 也就是 window.localStorage.cart 不是 undefined

           // 获取 当前 购物车数据
           // localStorage 中 以 json字符串形式存储数据
           // 需要还原为对应的数据结构
           const Man = JSON.parse(window.localStorage.Man);
           console.log(Man);

           // 如果 数组长度是 0 是 一个 空购物车
           if (Man.length === 0) {
             // 添加 购物车中 当前商品
             // 当前添加商品的购买数量
             res.num = Number($('[name="num"]').val());

             // 当前添加商品的购买状态 true购买 false不购买 默认是 购买
             res.buy = true;

             // 将 当前 商品的数据对象 以 数组存储 转化为 json字符串 存储到localStorage 中
             window.localStorage.Man = JSON.stringify([res]);

             // 如果 数组长度 不是 0  不是一个 空购物车
           } else {
             // 方法1: 使用 some() 函数 判断 需要新增的商品在不在 购物车中
             // 判断 当前要加入购物车的商品 是不是 已经存在 购物车
             let bool = Man.some((item) => {
               return item.goods_id === res.goods_id;
             });
             // 定义变量 存储 索引下标
             let index = 0;
             // 使用 for 循环 遍历 商品购物车数组
             for (let i = 0; i <= Man.length - 1; i++) {
               if (Man[i].goods_id === res.goods_id) {
                 // 给 变量 赋值 当前购物车商品的索引下标
                 index = i;
                 // 给 变量 赋值 true 表示 当前商品 已经 存在于购物车
                 bool = true;
                 //终止循环
                 break;
               }
             }
             if (bool) {
               // 判断 已经购买的数量 + 新增的购买数量 不能 超过 库存数量
               // 找 数组中 对象存储的 goods_id 和 当前商品 goods_id 相同的 商品对象
               if (
                 Man[index].num + Number($('[name="num"]').val()) >
                 Man[index].goods_number
               ) {
                 // 弹出提示 信息 购买数量超过库存
                 window.alert(
                   `您购买数量超过库存，您最大购买${
                     Man[index].goods_number - Man[index].num
                   }`
                 );

                 // 通过 return 终止 之后的程序
                 return;
               }

               // 如果 当前添加的购买数量 + 已经购买的数量 没有 超过 库存值
               // 可以 累加 购买 数量
               Man[index].num += Number($('[name="num"]').val());
               window.localStorage.Man = JSON.stringify([res]);
             } else {
               // 当前 加入的商品 没有存在于 购物车中
               // 当前商品 添加 购买数量 购买信息 添加到数组的首位
               res.buy = true;
               res.num = Number($('[name="num"]').val());

               // 在数组的首位新增
               Man.unshift(res);

               // 将 新的数组 转化为 json字符串 存储到 localStorage 中
               window.localStorage.Man = JSON.stringify(Man);
             }
           }
         }
         // 跳转 购物车页面
         window.location.href = "./cart.html";
       }
     }
   });

   let mask = document.createElement('div')
   mask.classList.add('mask')
   let glass = document.createElement('div')
   glass.classList.add('glass')
   glass.style.backgroundImage=`url(${res.goods_big_logo})`
   let show = document.querySelector('.media-left')
   show.appendChild(mask)
   let media = document.querySelector('.media-body')  
  
   media.appendChild(glass)

   show.addEventListener('mouseenter',()=>{
    mask.style.display = 'block';
    glass.style.display = 'block';
   })
   show.addEventListener('mouseleave',()=>{
    mask.style.display='none'
    glass.style.display = 'none'
})
show.addEventListener('mousemove',(event)=>{
  let divLeft = show.offsetLeft;
  let divTop = show.offsetTop;
  // 获取边框
  let borderLeft = show.clientLeft;
  let borderTop = show.clientTop;
  // 获取show占位
  let showWidth = show.clientWidth;
  let showHeight = show.clientHeight;
  // 获取遮罩占位
  let maskWidth = mask.offsetWidth;
  let maskHeight = mask.offsetHeight;

  // page定位 - 外边距 - 边框线 - 遮盖层占位一半
  let x = event.pageX - divLeft - borderLeft - maskWidth / 2;
  let y = event.pageY - divTop - borderTop - maskHeight / 2;

  // 计算极值
  // 最小值   0 
  // 最大值   show占位(内容+padding) - mask占位(内容+padding+border);
  x = x < 0 ? 0 : x;
  y = y < 0 ? 0 : y;

  x = x > showWidth - maskWidth ? showWidth - maskWidth : x;
  y = y > showHeight - maskHeight ? showHeight - maskHeight : y;

  // 将计算的数值 赋值给 遮盖成的定位数值
  // 拼接px单位
  mask.style.left = x + 'px';
  mask.style.top = y + 'px';

  glass.style.backgroundPosition = `-${x * 9 / 2}px -${y * 9 / 2}px`;
});

  }
